<template>
  <div class="goodsinfo-box">
    <!-- 添加购物车小球半场动画 -->
    <transition
    @before-enter="beforeEnter"
    @enter="enter"
    @after-enter="afterEnter">
       <div class="ball" v-show="flag"></div>
    </transition>

    <div class="mui-card">
      <!-- 轮播图 -->
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<swiper :aaa="goodsLunbo"></swiper>
					</div>
				</div>
			</div>

      <div class="mui-card">
      <div class="mui-card-header">{{ goodsinfo.title }}</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <p class="price">
            市场价：<del>￥{{ goodsinfo.market_price }}</del>&nbsp;&nbsp;
            销售价：<span class="now_price">￥{{ goodsinfo.sell_price }}</span>
          </p>
          <p>购买数量: <numbox @getcount="getSelectedCount"></numbox>  </p>
          <p>
            <mt-button type="primary" size="small">立即购买</mt-button>
            <mt-button type="danger" size="small" @click="goCar">加入购物车</mt-button>
          </p>
        </div>
      </div>
    </div>

     <!-- 商品参数区域 -->
    <div class="mui-card">
      <div class="mui-card-header">商品参数</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <p>商品货号：{{ goodsinfo.goods_no }}</p>
          <p>库存情况：{{ goodsinfo.stock_quantity }}件</p>
          <p>上架时间：{{ goodsinfo.add_time | dateFormat }}</p>
        </div>
      </div>
      <div class="mui-card-footer">
        <mt-button type="primary" size="large" plain >图文介绍</mt-button>
        <mt-button type="danger" size="large" plain >商品评论</mt-button>
      </div>
    </div>

  </div>
</template>
<script>

import swiper from '../subComent/swiper.vue'
import numbox from '../subComent/goodsinfo_numbox.vue'
export default {
  data() {
    return {
      id:this.$route.params.id,
      goodsLunbo:[],
      goodsinfo:{},
      flag:false,
      selectedCount:1,   //  默认1个
      test:true,
    };
  },
  components:{
    swiper,
    numbox
  },
  created() {
    this.getGoodsInfo()
    this.goodsInfo()
  },
  methods: {
    // 获取轮播图数据
    getGoodsInfo(){
      this.$http.get("api/getthumimages/"+this.id).then(res=>{
        // console.log(res)
        if(res.body,status == 0){
          this.goodsLunbo = res.body.message
        }
      })
    },
    // 详细信息数据
    goodsInfo(){
      this.$http.get("api/goods/getinfo/"+this.id).then(res=>{
        // console.log(res.body)
        if(res.body.status === 0){
          this.goodsinfo = res.body.message[0]
        }
      })
    },
    goCar(){
      this.flag = !this.flag;
      var goodsinfo = {     // 购买唯一标识id，数量，价格，是否选中   
        id:this.id,
        count:this.selectedCount,
        price:this.goodsinfo.sell_price,
        selected:true 
      };
      // 调用store中的mutations,将商品加入购物车
      this.$store.commit("addToCar",goodsinfo);
      // console.log(this.$store)
    },
    beforeEnter(el){
      el.style.transform="translate(0,0)";
    },
    enter(el,done){
      // 动态获取小球到购物车的距离
      el.offsetWidth;
      // 获取购物车
      let badge = document.getElementById("badge"),
      x = badge.getBoundingClientRect().left - el.getBoundingClientRect().left,
      y = badge.getBoundingClientRect().top - el.getBoundingClientRect().top;
      // console.log(badge.getBoundingClientRect().left , badge.getBoundingClientRect().top)
      // console.log(x,y)
      el.style.transform = `translate(${x}px,${y}px)`;
      el.style.transition = "all cubic-bezier(0,0,.25,1) .6s";
      done();
    },
    afterEnter(){
      this.flag = !this.flag;
    },
    getSelectedCount(count){
      this.selectedCount = count;
    }
  },
}
</script>
<style lang="scss" scoped>
  .goodsinfo-box {
     .ball {
      width: 15px;
      height: 15px;
      border-radius: 50%;
      background: red;
      z-index: 1000;
      position: absolute;
      left: 140px;
      top:390px;

    overflow: hidden;
    .now_price {
    color: red;
    font-size: 16px;
    font-weight: bold;
    }
  }
  }
</style>